<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
    <style>
        h1 {
            text-align: center;
            margin: 50px;
        }

        #add {
            width: 80px;
            background-color: rgb(120, 120, 126);
        }

        .main {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <h1>学生信息管理系统</h1>
    <div class="main">
        <table class="layui-table main">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>id</th>
                    <th>学生姓名</th>
                    <th>学生年龄</th>
                    <th>学生性别</th>
                    <th class="last"> <a class="layui-btn layui-btn-xs" lay-event="edit" id="add">新增</a>
                    </th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>
    <script src="./jquery-3.6.0.js"></script>
    <script src="./layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer,
                form = layui.form;
            //刷新列表
            function list() {
                $.ajax({
                    url: '/student/read',
                    success: function (res) {
                        let str = ``
                        $.each(res.data, function (index, item) {
                            str += ` <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td class="last"> <a class="layui-btn layui-btn-xs edit" lay-event="edit" _id=${item.id} _name=${item.name} _age=${item.age} _sex=${item.sex}>编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" index=${item.id}>删除</a></td>
                </tr>`
                        })
                        $('tbody').html(str)
                    }
                })
            }
            list()

            // 新增按钮
            $('#add').on('click', function () {
                let edit_str = `  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form"
            lay-filter="edit">
            <div class="layui-form-item">
                <label class="layui-form-label">学生姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生性别</label>
                    <div class="layui-input-block">
                        <input type="text" name="sex" required lay-verify="required" placeholder="请输入性别"
                            autocomplete="off" class="layui-input">
                    </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn lay-add" lay-submit lay-filter="formDemo">确认修改</button>
                </div>
            </div>
        </form>`;
                let add = layer.open({
                    type: 1,
                    title: '新增学生信息',
                    content: edit_str
                });
                $('.add-form').on('submit', function (e) {
                    e.preventDefault()
                    console.log(1);
                    let data = $(this).serialize()
                    $.ajax({
                        type: 'post',
                        url: '/student/add',
                        data: data,
                        success: function (res) {
                            layer.msg(res.message)
                            list()
                            layer.close(add);
                        }

                    })
                })

            })
            // 编辑按钮
            $('tbody').on('click', '.edit', function () {
                let edit_str = `  <form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form"
            lay-filter="edit">
            <div class="layui-form-item">
                <label class="layui-form-label">学生姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生性别</label>
                    <div class="layui-input-block">
                        <input type="text" name="sex" required lay-verify="required" placeholder="请输入性别"
                            autocomplete="off" class="layui-input">
                    </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="hidden" name="id">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                </div>
            </div>
        </form>`;
                let edit = layer.open({
                    type: 1,
                    title: '修改信息',
                    content: edit_str
                });
                //给表单赋值
                form.val("edit", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "name": $(this).attr('_name'),
                    "age": $(this).attr('_age'),
                    "sex": $(this).attr('_sex'),
                    "id": $(this).attr('_id'),
                });
                //获取表单区域所有值
                $('.edit-form').on('submit', function (e) {
                    e.preventDefault()
                    let data = form.val("edit");
                    $.ajax({
                        type: 'post',
                        url: '/student/update',
                        data: data,
                        success: function (res) {
                            layer.msg(res.message)
                            list()
                            layer.close(edit);
                        }
                    })
                })
            })

            // 删除按钮
            $('tbody').on('click', '.layui-btn-danger', function () {
                let id = $(this).attr('index')
                console.log(id);
                layer.confirm('确定要删除嘛?', function (index) {
                    $.ajax({
                        data: {
                            id: id
                        },
                        url: '/student/delete',
                        success: function (res) {
                            layer.msg(res.message)
                            list()
                        }
                    })
                    layer.close(index);
                });
            })
        });
    </script>

</body>

</html>